<template>
  <div class="passwordIntensity">
    <div class="intensityBox">
      <span :style="
          isFeeble == true || isMiddle == true || isStrong == true
            ? 'background: #DE4309'
            : ''
        "></span>
      <span :style="
          isMiddle == true || isStrong == true ? 'background: #FFA100' : ''
        "></span>
      <span :style="isStrong == true ? 'background: #58AE0C' : ''"></span>
      <p :style="
          isFeeble
            ? 'color: #DE4309'
            : isMiddle
            ? 'color: #FFA100'
            : isStrong
            ? 'color: #58AE0C'
            : ''
        ">
        {{ isFeeble ? "弱" : isMiddle ? "中" : isStrong ? "强" : "" }}
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "passwordIntensity",
  props: {
    isFeeble: Boolean,
    isMiddle: Boolean,
    isStrong: Boolean,
  },
  data () {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.passwordIntensity {
  // float: left;
  padding-top: 10px;
  font-size: 12px;
  .intensityBox {
    overflow: hidden;
    margin: 0;
    // padding-left: 30px;
    span {
      float: left;
      width: 100px;
      height: 4px;
      border: 1px solid var(--prev-border-color-grey);
      margin-right: 1px;
      line-height: 14px;
      text-align: center;
      list-style: none;
    }
    p {
      font-size: 14px;
      float: left;
      margin: 0;
      line-height: 12px;
      padding-left: 10px;
    }
  }
}
</style>
